<template>
  <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end">
    <div class="mock-data-toggle" :class="{ 'active': isMockDataActive }">
      <el-icon class="toggle-icon"><HelpFilled /></el-icon>
      <span class="toggle-text">
        {{ isMockDataActive ? '模拟数据模式' : '真实数据模式' }}
      </span>
      <el-badge 
        v-if="isMockDataActive" 
        type="warning" 
        value="模拟" 
        effect="light"
      />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="toggle">
          <el-switch 
            v-model="mockDataValue" 
            active-text="模拟数据" 
            inactive-text="真实数据"
            @change="toggleMockData"
          />
        </el-dropdown-item>
        <el-dropdown-item divided command="info">
          <el-icon><HelpFilled /></el-icon>
          关于数据模式
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { HelpFilled } from '@element-plus/icons-vue'
import apiService from '../services/apiService.js'
import { ElMessage, ElNotification } from 'element-plus'
import { computed } from 'vue'

// 安全地获取模拟数据状态
const isMockDataActive = computed(() => {
  try {
    return apiService && apiService.useMockData && apiService.useMockData.value === true
  } catch (error) {
    console.error('获取模拟数据状态失败:', error)
    return false
  }
})

// 模拟数据值的计算属性，用于v-model绑定
const mockDataValue = computed({
  get: () => isMockDataActive.value,
  set: (value) => {
    try {
      toggleMockData(!!value)
    } catch (error) {
      console.error('设置模拟数据值失败:', error)
    }
  }
})

// 切换模拟数据模式
const toggleMockData = (value) => {
  try {
    // 确保value是布尔值
    const newValue = !!value
    
    if (apiService && typeof apiService.setUseMockData === 'function') {
      apiService.setUseMockData(newValue)
      
      const mode = newValue ? '模拟数据' : '真实数据'
      ElMessage.success(`已切换到${mode}模式`)
      
      // 显示详细信息
      if (newValue) {
        ElNotification.warning({
          title: '模拟数据模式',
          message: '系统当前使用模拟数据，数据仅用于演示目的。点击按钮可切换回真实数据模式。',
          duration: 5000
        })
      } else {
        ElNotification.success({
          title: '真实数据模式',
          message: '系统当前尝试获取真实数据。如果后端服务不可用，可能会显示错误信息。',
          duration: 5000
        })
      }
    } else {
      console.error('apiService或setUseMockData方法不可用')
      ElMessage.error('系统组件未正确加载，请刷新页面重试')
    }
  } catch (error) {
    console.error('切换模拟数据模式失败:', error)
    ElMessage.error('切换数据模式失败，请稍后重试')
  }
}

// 处理下拉菜单命令
const handleCommand = (command) => {
  try {
    if (command === 'info') {
      ElNotification({
        title: '数据模式说明',
        message: `
          <div style="line-height: 1.6;">
            <p>• 真实数据模式：尝试从后端API获取实际数据</p>
            <p>• 模拟数据模式：使用内置的模拟数据进行演示</p>
            <p>• 建议：优先使用真实数据，当后端服务不可用时切换到模拟数据模式</p>
          </div>
        `,
        duration: 8000,
        dangerouslyUseHTMLString: true
      })
    }
  } catch (error) {
    console.error('处理下拉菜单命令失败:', error)
    ElMessage.error('操作失败，请稍后重试')
  }
}
</script>

<style scoped>
.mock-data-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  user-select: none;
}

.mock-data-toggle:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
}

.mock-data-toggle.active {
  background-color: #fdf6ec;
  border-color: #fce8c3;
}

.toggle-icon {
  color: #606266;
  font-size: 16px;
}

.mock-data-toggle.active .toggle-icon {
  color: #e6a23c;
}

.toggle-text {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.mock-data-toggle.active .toggle-text {
  color: #e6a23c;
}

:deep(.el-switch) {
  margin-left: 12px;
}

:deep(.el-dropdown-menu__item) {
  cursor: pointer;
}

:deep(.el-dropdown-menu__item.is-disabled) {
  cursor: not-allowed;
}
</style>